<template>
	<div class="bulletin-box">
		<div id="pdfDom">
			<div class="report-header">
				<h1>{{ reportInfo.template.headerBig }}</h1>
				<p>第{{ reportInfo.template.reportCode }}次</p>
				<div class="headerLine">
					<span>{{ reportInfo.template.reportUnit }}</span>
					<span>{{ reportInfo.template.reportTime }}</span>
				</div>
			</div>
			<div class="report-content">
				<h2>{{ reportInfo.fireBase.fireCode }}号火情点简报</h2>
				<div class="content-first">
					<h3>一、火情监测信息</h3>
					<div class="firstItem">
						<span>时间：</span>
						<div>
							<p>{{ reportInfo.fireBase.time }}</p>
						</div>
					</div>
					<div class="firstItem">
						<span>地点：</span>
						<div>
							<p>{{ reportInfo.fireBase.place }}</p>
							<p>坐标：{{ reportInfo.fireBase.lon }}°E,&nbsp;{{ reportInfo.fireBase.lat }}°N</p>
							<p>距离：{{ reportInfo.fireBase.distance }}</p>
							<p>方位度：{{ reportInfo.fireBase.angle }}</p>
						</div>
					</div>
					<div class="firstItem">
						<span>高程：</span>
						<div>
							<p>{{ reportInfo.fireBase.height }}</p>
						</div>
					</div>
					<div class="firstItem">
						<span>热点数：</span>
						<div>
							<p>{{ reportInfo.fireBase.hotNum }}</p>
						</div>
					</div>
					<div class="firstItem">
						<span>植被分布：</span>
						<div>
							<p>{{ reportInfo.fireBase.veg }}</p>
						</div>
					</div>
				</div>
				<div class="content-second">
					<h3>二、火情复核信息</h3>
					<div class="secondItem">
						<span>复核情况：</span>
						<div>
							<p>{{ reportInfo.checkRes.words }}</p>
						</div>
					</div>
					<div class="secondItem">
						<span>伤亡情况：</span>
						<div>
							<span>死亡：{{ reportInfo.checkRes.death ? reportInfo.checkRes.death + '人,' : '不明,' }}</span>
							<span>受伤：{{ reportInfo.checkRes.hurt ? reportInfo.checkRes.hurt + '人,' : '不明,' }}</span>
							<span>失踪：{{ reportInfo.checkRes.miss ? reportInfo.checkRes.miss + '人,' : '不明,' }}</span>
						</div>
					</div>
				</div>
				<div class="content-third">
					<h3>三、作战辅助信息</h3>
					<div class="thirdItem" v-for="(itemOne, indexOne) of reportInfo.poiList" :key="indexOne">
						<h4>（{{ daxie[indexOne] }}）周边{{ itemOne.group }}<span v-show="itemOne.children.length === 0">无</span></h4>
						<div class="tableBox" v-for="(itemTwo, indexTwo) of itemOne.children" :key="indexTwo">
							<h5>表{{ indexOne + 1 }}-{{ indexTwo + 1 }} 事发地方圆{{ scopeValue }}公里内{{ itemTwo.type }}情况表</h5>
							<el-table class="elTable" :data="itemTwo.dataList">
								<!-- <el-table-column
										label="序号"
										type="index"
										:index='(index)=>{return (index+1)}'>
									</el-table-column> -->
								<el-table-column v-for="(itemTheader, indexTheader) of itemTwo.therader" :key="indexTheader" :prop="itemTheader.prop" :label="itemTheader.label"> </el-table-column>
							</el-table>
							<!-- <van-grid square>
									<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
								</van-grid> -->
							<p>注：本表为方圆{{ scopeValue }}公里内前10位距事发点距离最短的{{ itemTwo.type }}</p>
						</div>
					</div>
				</div>
				<div class="content-forth" v-if="reportInfo.imgUrl">
					<h3>四、火情地图</h3>
					<img :src="reportInfo.imgUrl" alt="" />
					<p>图1-1 事发地遥感卫星影像图</p>
				</div>
			</div>
			<div class="report-footer">
				<div class="footerLine">
					<span>编辑：{{ reportInfo.template.reporter }}</span>
					<span>联系方式：{{ reportInfo.template.phone }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getFireDetail, getReportPoi } from '../../api/fire'
export default {
	data() {
		return {
			scopeValue: 3, // 火情范围
			daxie: ['一', '二', '三', '四', '五'],
			reportInfo: {
				// 简报模板数据
				template: {
					headerBig: '海南省森林防火火情简报',
					reportUnit: '海南省森林防火指挥部办公室',
					reportTime: null,
					headerSmall: '',
					reportCode: '20210401-001',
					reporter: '海南省森林防火指挥部办公室',
					phone: '183*******'
				},
				// 火点信息数据
				fireBase: {
					fireCode: 'HD-20210401002',
					time: '2021年4月1日  00时37分',
					place: '海南省昌江岔河镇**村',
					lon: '119.51°E',
					lat: '19.50°N',
					distance: '10km',
					angle: '顺时针115°',
					height: '25m',
					hotNum: '3个',
					veg: '植被覆盖度45%，其中森林10%，草地90%'
				},
				// 火点复核数据
				checkRes: {
					words: '2021年4月1日凌晨00时37分，昌江叉河镇发生一起小型火灾，县消防支队已前往开展救火扑救工作，并上报省应急管理厅指挥中心。',
					hurt: '',
					death: '',
					miss: ''
				},
				// poi点数据
				poiList: [
					{
						group: '救援力量',
						children: [
							{
								type: '救援队伍',
								therader: [
									{ prop: 'value1', label: '队伍类别' },
									{ prop: 'value2', label: '队伍名称' },
									{ prop: 'value3', label: '队伍人数' },
									{ prop: 'value4', label: '联系电话' }
								],
								dataList: [{ value1: '-', value2: '-', value3: '-', value4: '-' }]
							},
							{
								type: '医疗保障资源',
								therader: [
									{ prop: 'value1', label: '医疗资源类别' },
									{ prop: 'value2', label: '医疗资源名称' },
									{ prop: 'value3', label: '医疗资源位置' },
									{ prop: 'value4', label: '联系电话' }
								],
								dataList: [{ value1: '-', value2: '-', value3: '-', value4: '-' }]
							}
						]
					},
					{
						group: '救援物资',
						children: [
							{
								type: '救援物资',
								therader: [
									{ prop: 'value1', label: '救援物质类别' },
									{ prop: 'value2', label: '救援物质名称' },
									{ prop: 'value3', label: '救援物质位置' },
									{ prop: 'value4', label: '联系电话' }
								],
								dataList: [{ value1: '-', value2: '-', value3: '-', value4: '-' }]
							}
						]
					},
					{
						group: '重点防护目标',
						children: [
							{
								type: '重点防护目标',
								therader: [
									{ prop: 'value1', label: '防护目标类别' },
									{ prop: 'value2', label: '防护目标名称' },
									{ prop: 'value3', label: '防护目标位置' },
									{ prop: 'value4', label: '联系电话' }
								],
								dataList: [{ value1: '-', value2: '-', value3: '-', value4: '-' }]
							}
						]
					}
				],
				// 专题图数据
				imgUrl: '',
				imgId: null
			}
		}
	},
	mounted() {
		document.title = '火情简报'
		let fireQuery = this.$route.query
		if (fireQuery.id) {
			console.log(fireQuery)
			this.fireId = fireQuery.id
			this.scopeValue = fireQuery.scopeValue
			this.getDetailData(fireQuery.id)
		}
	},
	methods: {
		// 火点详情
		async getDetailData(id) {
			let ddata = await getFireDetail(id)
			this.getFireInfo(ddata)
			console.log(ddata)
			// 获取poi点集合
			this.getPoi()
		},
		// 获取poi点集合
		async getPoi() {
			let params = {
				lon: this.reportInfo.fireBase.lon,
				lat: this.reportInfo.fireBase.lat,
				radius: this.scopeValue * 1000
			}
			let res = await getReportPoi(params)
			this.reportInfo.poiList = res.poiList
			console.log(this.reportInfo)
		},
		// 格式化火情简报信息
		getFireInfo(fireRes) {
			this.reportInfo.fireBase.fireCode = fireRes.code
			this.reportInfo.fireBase.time = fireRes.observeTime.replace('-', '年').replace('-', '月').replace(' ', '日 ').replace(':', '时').replace(':', '分') + '秒'
			this.reportInfo.fireBase.place = fireRes.place
			this.reportInfo.fireBase.lon = fireRes.longitude
			this.reportInfo.fireBase.lat = fireRes.latitude
			this.reportInfo.fireBase.distance = fireRes.distance + 'Km'
			this.reportInfo.fireBase.angle = fireRes.direction + '°'
			this.reportInfo.fireBase.height = fireRes.elevationAver + 'm'
			this.reportInfo.fireBase.hotNum = fireRes.hotspot
			let all = fireRes.gfAver ? fireRes.gfAver + '%' : '未知'
			let senlin = fireRes.forestPercent ? fireRes.forestPercent + '%' : 0
			let caodi = fireRes.lawnPercent ? fireRes.lawnPercent + '%' : 0
			let nongtian = fireRes.farm ? fireRes.farm + '%' : 0
			let guanmu = fireRes.bush ? fireRes.bush + '%' : 0
			let chengshi = fireRes.city ? fireRes.city + '%' : 0
			let veg = `植被覆盖度${all}, 其中森林${senlin},草地${caodi},农田及自然植被${nongtian},灌木${guanmu},城市或荒漠${chengshi}`
			this.reportInfo.fireBase.veg = veg
		}
	}
}
</script>

<style lang="scss">
#pdfDom {
	.content-third .thirdItem .tableBox {
		.elTable {
			width: 90%;
			margin: auto;
			border: 0;
			border-left: 1px solid #000;
			border-top: 1px solid #000;
			margin-bottom: 20px;
			th,
			tr,
			td {
				color: #000;
				border: 0;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				font-size: 16px;
				font-family: FangSong;
				text-align: center;
			}
			tbody tr:hover > td {
				background-color: unset !important;
			}
		}
	}
}
.bulletin-box {
	height: 100vh;
	background: #ffffff;
	position: relative;
	z-index: 2;
	overflow-x: scroll;
	#pdfDom {
		background: #fff;
		width: 1240px;
		height: 840px;
		overflow: auto;
		text-align: left;
		padding: 200px 50px;
		font-family: FangSong;
		line-height: 46px;
		.report-header {
			border-bottom: 2px solid #fe0000;
			text-align: center;
			h1 {
				font-size: 44px;
				color: #ff0000;
				font-family: SimHei;
			}
			p {
				font-size: 18px;
				line-height: 18px;
				margin: 68px 0 70px;
			}
			.headerLine {
				font-size: 18px;
				line-height: 45px;
				display: flex;
				justify-content: space-between;
				border-bottom: 5px solid #fe0000;
				margin-bottom: 1px;
			}
		}
		.report-content {
			font-size: 18px;
			h2,
			h3,
			h4,
			h5 {
				font-weight: 900;
			}
			h2 {
				font-size: 26px;
				line-height: 26px;
				text-align: center;
				font-family: SimHei;
				margin: 64px 0 69px;
			}
			h3 {
				font-size: 18px;
				font-family: SimHei;
			}
			h4 {
				font-size: 18px;
				text-indent: 2em;
			}
			h5 {
				font-size: 14px;
				text-align: center;
				line-height: 22px;
			}
			.firstItem,
			.secondItem {
				display: flex;
				justify-content: flex-start;
				span {
					text-indent: 2em;
					white-space: nowrap;
					font-weight: 900;
				}
			}
			.content-third .thirdItem .tableBox {
				p {
					font-size: 14px;
					line-height: 36px;
					text-indent: 5em;
				}
			}
			.content-forth {
				img {
					display: block;
				}
				p {
					font-size: 14px;
					text-align: center;
					line-height: 50px;
				}
			}
		}
		.report-footer {
			padding-top: 1px;
			border-top: 2px solid #fe0000;
			.footerLine {
				font-size: 18px;
				display: flex;
				justify-content: space-between;
				border-top: 5px solid #fe0000;
			}
		}
	}
}
</style>